<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'
import jwt_decode from "jwt-decode";

const router = useRouter()
const user = ref('')
const englishName = ref('')//英文名
const gender = ref('男')//性别
const phone = ref('')//手机号
const home = ref('')//家庭地址
const email = ref('')//邮箱
const borndate = ref('')//生日
const company = ref('')//公司地址

const isEnglish = ref(true)//英文名
const isGender = ref(true)//性别
const isPhone = ref(true)//手机号
const isHome = ref(true)//家庭地址
const isEmail = ref(true)//邮箱
const isBorndate = ref(true)//生日
const isCompany = ref(true)//公司地址

const isBtn = ref(false)
let token = jwt_decode(localStorage.getItem("token"))
if (token == null) {
    token = jwt_decode(localStorage.getItem("longToken"))
}
function link(userId) {
    axios.get('http://192.168.110.221:8080/user/findByIdController', {
        params: {
            token: localStorage.getItem("token"),
            longToken: localStorage.getItem("longToken"),
            userId: token.userId,
        }
    })
        .then((resp) => {
            if (resp.data.code == 200) {
                user.value = resp.data.datas
            } else if (resp.data.code == 400) {
                alert("请求参数错误")
            }
        })
        .catch((e) => {
            alert("请求参数错误")
            router.push('/login')
        })
}
function show(name) {
    isBtn.value = true
    isEnglish.value = true;
    isGender.value = true;
    isPhone.value = true;
    isHome.value = true;
    isEmail.value = true;
    isBorndate.value = true;
    isCompany.value = true;
    switch (name) {
        case "English"://英文名
            isEnglish.value = false;
            englishName.value = user.value.englishName;
            break;
        case 'gender'://性别
            isGender.value = false;
            gender.value = user.value.gender;
            break;
        case 'phone'://手机号
            isPhone.value = false;
            phone.value = user.value.phone;
            break;
        case 'home'://家庭地址
            isHome.value = false;
            home.value = user.value.homeAddress;
            break;
        case 'email'://邮箱
            isEmail.value = false;
            email.value = user.value.email;
            break;
        case 'borndate'://生日
            isBorndate.value = false;
            borndate.value = user.value.borndate;
            break;
        case 'company'://公司地址
            isCompany.value = false;
            company.value = user.value.companyAddress;
            break;
    }
}
function noShow(name) {
    isEnglish.value = true;
    isGender.value = true;
    isPhone.value = true;
    isHome.value = true;
    isEmail.value = true;
    isBorndate.value = true;
    isCompany.value = true;
    switch (name) {
        case "English"://英文名
            user.value.englishName = englishName.value;
            break;
        case 'gender'://性别
            user.value.gender = gender.value
            break;
        case 'phone'://手机号
            user.value.phone = phone.value;
            break;
        case 'home'://家庭地址
            user.value.homeAddress = home.value;
            break;
        case 'email'://邮箱
            user.value.email = email.value;
            break;
        case 'borndate'://生日
            user.value.borndate = borndate.value;
            break;
        case 'company'://公司地址
            user.value.companyAddress = company.value;
            break;
    }
}
function submit() {
    console.log(user.value.borndate);
    const userinfo = {
        "userId": user.value.userId,
        "englishName": user.value.englishName,
        "phone": user.value.phone,
        "email": user.value.email,
        "borndate": formatDate(user.value.borndate),
        "gender": user.value.gender,
        "home_address": user.value.homeAddress,
        "company_address": user.value.companyAddress,
        token:localStorage.getItem('token'),
        longToken:localStorage.getItem('longToken'),
    }
    axios({
        url: "http://192.168.110.221:8080/user/updateAllInfoController",
        method: "post",
        headers: { 'content-type': 'application/x-www-form-urlencoded;charset=utf-8' },
        data: userinfo
    })
        .then(function (resp) {
            console.log(resp);
            if (resp.data.code == 200) {
                console.log(resp.data.msg);
                isBtn.value = false
            } else if (resp.data.code == 400) {
                console.log(resp.data.msg);
            }
        })
        .catch((e)=>{
            console.log(e);
        })
}
onMounted(() => {
    let token;
    token = localStorage.getItem("token")
    if (token == null) {
        token = localStorage.getItem("longToken")
        if (token == '') {
            router.push('/login')
        } else {
            link(token.userId)
        }
    } else {
        link(token.userId)
    }

})

// 格式化日期
function formatDate(date) {
    var formattedDate = new Date(date);
    var year = formattedDate.getFullYear();
    var month = ("0" + (formattedDate.getMonth() + 1)).slice(-2);
    var day = ("0" + formattedDate.getDate()).slice(-2);
    return year + "-" + month + "-" + day;
}
</script>


<template>
    <div class="person-container">
        <div class="header">
            <!-- 头像 -->
            <img :src="`http://192.168.110.221:8080${user.imageAddress}`" alt="头像">
            <!-- 姓名 -->
            <div>
                <span>{{ user.userName }}</span>
            </div>
            <!-- 用户ID -->
            <div>
                <span>用户ID:</span>
                <span>{{ user.userId }}</span>
            </div>
        </div>
        <div class="info-box">
            <!-- 账号 -->
            <li>
                <span>账号</span>
                <div>
                    <span>{{ user.loginAccount }}</span>
                    <!-- <span class="iconfont">&#xe65f;</span> -->
                </div>
            </li>
            <!-- 用户编号 -->
            <li>
                <span>用户编号</span>
                <div>
                    <span>{{ user.userNumber }}</span>
                    <!-- <span class="iconfont">&#xe65f;</span> -->
                </div>
            </li>
            <!-- 英文名 -->
            <li>
                <span>英文名</span>
                <input type="text" v-if="!isEnglish" v-model="englishName" @blur="noShow('English')"
                    @keyup.enter="noShow('English')">
                <div @click="show('English')" v-if="isEnglish">
                    <span>{{ user.englishName }}</span>
                    <span class="iconfont icon-xiangyoujiantou"></span>
                </div>

            </li>
            <!-- 性别 -->
            <li>
                <span>性别</span>
                <div @click="show('gender')">
                    <div v-if="isGender">
                        <span>{{ user.gender }}</span>
                        <span class="iconfont icon-xiangyoujiantou"></span>
                    </div>

                    <div v-if="!isGender" @change="noShow('gender')">
                        <label for="male">男
                            <input type="radio" name="gender" v-model="gender" value="男" id="male" class="radio-style">
                        </label>
                        <label for="female">女
                            <input type="radio" name="gender" v-model="gender" value="女" id="female" class="radio-style">
                        </label>
                    </div>
                </div>
            </li>
            <!-- 手机号 -->
            <li>
                <span>手机号</span>
                <input type="number" v-if="!isPhone" v-model="phone" @blur="noShow('phone')">
                <div @click="show('phone')" v-if="isPhone">
                    <span>{{ user.phone }}</span>
                    <span class="iconfont icon-xiangyoujiantou"></span>
                </div>
            </li>
            <!-- 地址 -->
            <li style="height: 50px;">
                <span>家庭地址</span>
                <input type="text" v-if="!isHome" v-model="home" @blur="noShow('home')">
                <div @click="show('home')" v-if="isHome">
                    <span>{{ user.homeAddress }}</span>
                    <span class="iconfont icon-xiangyoujiantou"></span>
                </div>
            </li>
            <!-- 邮箱 -->
            <li>
                <span>邮箱</span>
                <input type="text" v-if="!isEmail" v-model="email" @blur="noShow('email')">
                <div @click="show('email')" v-if="isEmail">
                    <span>{{ user.email }}</span>
                    <span class="iconfont icon-xiangyoujiantou"></span>
                </div>
            </li>
            <!-- 生日 -->
            <li>
                <span>生日</span>
                <input type="date" v-if="!isBorndate" v-model="borndate" @blur="noShow('borndate')">
                <div @click="show('borndate')" v-if="isBorndate">
                    <span>{{ formatDate(user.borndate) }}</span>
                    <span class="iconfont icon-xiangyoujiantou"></span>
                </div>
            </li>
            <li style="height: 50px;">
                <span>公司地址</span>
                <input type="text" v-if="!isCompany" v-model="company" @blur="noShow('company')">
                <div @click="show('company')" v-if="isCompany">
                    <span>{{ user.companyAddress }}</span>
                    <span class="iconfont icon-xiangyoujiantou"></span>
                </div>
            </li>
            <li v-if="isBtn">
                <button @click="submit">确认</button>
            </li>
        </div>
    </div>
</template>


<style scoped>
button {
    width: 100%;
    height: 40px;
    color: #fff;
    background-color: rgba(11, 204, 53, 0.925);
    border: transparent;
    font-size: 18px;
}

input {
    float: right;
    outline: none;
    border: transparent;
    font-size: 18px;
    text-align: right;
}

label {
    display: inline-block;
}

input[type="radio"] {
    width: 20px;
    height: 20px;
}

.person-container {
    list-style: none;
    /* height: 600px; */
    background-color: #fff;
    padding: 10px 10px 0;
}

.header::after {
    display: block;
    content: '';
    clear: both;
}

.header img {
    float: left;
    width: 70px;
    height: 70px;
}

.header div:nth-of-type(1) {
    font-size: 20px;
    padding: 10px;
    text-indent: 2em;
    font-weight: 600;
}

.header div:nth-of-type(2) {
    font-size: 13px;
    padding: 2px;
    text-indent: 3em;
    font-weight: 200;
}

.info-box {
    border-top: 1px solid black;
    margin-top: 30px;
}

.info-box li {
    padding: 15px;
}

.info-box li::after {
    display: block;
    content: '';
    clear: both;
}

.info-box li>span {
    float: left;
}

.info-box li>div {
    float: right;
    width: 200px;
    text-align: right;
    word-break: break-all;
}
</style>